<template>
  <div id="HomePage">
    <!-- 轮播图 -->
    <swiper
      id="swiper"
      :modules="modules"
      :slides-per-view="1"
      :space-between="0"
      navigation
      lazy
      loop
      autoplay
      :pagination="{
        clickable: true
      }"
    >
      <swiper-slide
        class="banner-swiper"
        v-for="(item, index) in swiperList"
        :key="index"
      >
        <img class="swiper-lazy" :data-src="item.img" alt="轮播图" />
        <div class="swiper-lazy-preloader"></div>
        <div class="swiper-slide-title">
          <h1>{{ item.title }}</h1>
          <p>{{ item.content }}</p>
        </div>
      </swiper-slide>
    </swiper>

    <!-- 西藏简介 -->
    <div class="intro-section">
      <h2>西藏简介</h2>
      <div class="intro-container">
        <div class="intro-text">
          <p>
            西藏，简称藏，是中国的一个自治区，位于中国西南部。西藏是世界屋脊，拥有众多的高山和深邃的峡谷，风光秀丽，文化底蕴深厚。这里有世界上最著名的雪山、湖泊，还有深厚的藏传佛教文化，是一个让人向往的旅游胜地。
          </p>
        </div>
        <div class="intro-image">
          <img :src="tibetImage" alt="西藏风光" />
        </div>
      </div>
    </div>

    <!-- 旅游推荐 -->
    <div class="tour-recommendation">
      <h2>旅游推荐</h2>
      <div class="tour-list">
        <div class="tour-item" v-for="(item, index) in tourList" :key="index">
          <img :src="item.img" :alt="item.title" />
          <div class="tour-info">
            <h3>{{ item.title }}</h3>
            <p>{{ item.description }}</p>
          </div>
        </div>
      </div>
    </div>
  
  </div>
  <!-- 底部图片 -->
    <div class="bottom-images">
      <div class="bottom-image">
         <img src="../assets/img/l1.jpg"   style="height: 440px"  alt="图1" />
      </div>
      <div class="bottom-image">
        <img src="@/assets/img/l2.jpeg" alt="图片2" />
      </div>
      </div>
 
</template>

<script setup name="HomePage">
import { onMounted } from 'vue'
import { Navigation, Pagination, Lazy, Autoplay } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css/lazy'
import 'swiper/css/autoplay'

import banner1 from '@/assets/img/banner1.jpeg'
import banner2 from '@/assets/img/banner2.jpg'
import banner3 from '@/assets/img/banner3.jpeg'
import banner4 from '@/assets/img/banner4.jpeg'
import tibetImage from '@/assets/img/x.jpeg'  // 西藏风光图片

const swiperList = [
  {
    img: banner1,
    title: '卡若拉冰川',
    content: '冰川天女'
  },
  {
    img: banner2,
    title: '大昭寺',
    content: '藏传佛教艺术的明珠'
  },
  {
    img: banner3,
    title: '巴松措',
    content: '人间天堂'
  },
  {
    img: banner4,
    title: '八廊街',
    content: '宗教的圣路'
  }
]

const modules = [Navigation, Pagination, Lazy, Autoplay]

// 使用 `import` 引入图片，确保路径正确
import bdlg from '@/assets/img/bdlg.jpeg'
import mnch from '@/assets/img/mnch.jpeg'
import zmlmf from '@/assets/img/zmlmf.jpeg'
import dzs from '@/assets/img/dzs.jpeg'
const tourList = [
  {
    img: bdlg,
    title: '布达拉宫',
    description: '布达拉宫是西藏的象征，拥有超过1300年的历史，是藏传佛教的圣地。',
  },
  {
    img: mnch,
    title: '纳木措湖',
    description: '纳木措湖是西藏三大圣湖之一，湖水清澈、景色迷人。',
  },
  {
    img: zmlmf,
    title: '珠穆朗玛峰',
    description: '世界最高峰，珠穆朗玛峰吸引着登山者和旅行者的目光。',
  },
  {
    img: dzs,
    title: '大昭寺',
    description: '大昭寺是西藏最重要的佛教寺庙之一，充满历史和宗教意义。',
  }
]

onMounted(() => {
  // 这里可以添加其他初始化逻辑
})
</script>

<style scoped>
/* 整体盒子 */
#HomePage {
  width: 100%;
}

/* 顶部轮播图 */
#swiper {
  width: 100%;
  height: 600px;
}

#swiper .banner-swiper {
  width: 100%;
  height: 100%;
  position: relative;
}

#swiper .banner-swiper img {
  width: 100%;
  height: 100%;
}

#swiper .banner-swiper .swiper-slide-title {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999999999;
  width: 100%;
  height: 100%;
  color: #fff;
  background: rgba(51, 51, 51, 0.534);
  text-align: center;
  line-height: 80px;
}

#swiper .banner-swiper .swiper-slide-title > h1 {
  font-size: 50px;
  margin-top: 12%;
}

#swiper .banner-swiper .swiper-slide-title > p {
  font-size: 20px;
  margin-top: 1%;
  font-weight: 700;
}

/* 西藏简介部分 */
.intro-section {
  margin: 40px 0;
  padding: 20px;
  background-color: #8B0000; /* 设置为深红色 */
}

.intro-section h2 {
  font-size: 32px;
  text-align: center;
  margin-bottom: 20px;
  color: white; /* 文字颜色改为白色 */
}

.intro-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.intro-text {
  width: 50%;
  padding-right: 20px;
  color: white; /* 文字颜色改为白色 */
}

.intro-image img {
  width: 100%;
  height: auto;
  max-width: 500px; /* 调整图片宽度 */
  max-height:270px;
}

/* 旅游推荐部分 */
.tour-recommendation {
  margin: 40px 0;
  padding: 20px;
}

.tour-recommendation h2 {
  font-size: 32px;
  text-align: center;
  margin-bottom: 20px;
}

.tour-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.tour-item {
  width: 22%;
  margin-bottom: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.tour-item:hover {
  transform: translateY(-10px);
}

.tour-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.tour-info {
  padding: 15px;
  background-color: #fff;
}

.tour-info h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}

.tour-info p {
  font-size: 14px;
  color: #666;
}

/* 底部图片样式 */
.bottom-images {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 40px;
}
.bottom-image {
  width: 45%; /* 图片占屏幕的50% */
  border-width: 4px; /* 保持边框宽度统一为4px */
  border-color:red; 
  border-top-style: dashed; /* 上边框设置为虚线样式 */
  border-left-style: dashed; /* 左边框设置为虚线样式 */
  border-bottom-style: solid; /* 下边框设置为实线样式 */
  border-right-style: solid; /* 右边框设置为实线样式 */
  padding: 10px;
}

.bottom-image img {
  width: 100%;
  height: auto;
  border-radius: 5px; /* 圆角 */
}
</style>